<template>
  <div>
  	 <x-header>{{instance.subject}}<router-link to="/"  slot="right"> <a class="fa fa-home fa-15x"></a> </router-link></x-header>
  	 	<div class="formBox">
		   <div v-if="form.type=='INNER'">
			<ab-custom-form></ab-custom-form>
	   </div>
	    <div v-if="form.type=='FRAME'">
        	<ab-url-form  ref="urlForm" :form="form" ></ab-url-form>
       </div>
		   </div>
	   <bpm-buttons :buttons="buttons"></bpm-buttons>
	   <div v-if="dynamicComponent.show"  :is="dynamicComponent.key" @cancel="dynamicComponent.show=false" @callback="dynamicComponent.callback" :show-dialog="dynamicComponent.show" :passConf="dynamicComponent.flowParam"></div>
  </div>
</template>

<script>
import Vue from 'vue'
import bpmService from '@/service/bpm/bpmService'
import formService from '@/service/form/formService'

export default {
  name: 'abCheckbox',

  data :function () {
	    return {
	      instance:"",
        instanceId:'',
	      form:"",
        buttons:[],
	      flowRequestParam:{}, // 最终提交的数据
		  configSpecified:{},	// 流程配置信息
	      dynamicComponent:{
	    	  key:"opinion-dialog",
	    	  show:false
	      }
	    }
	},


  methods: {

    getData(){

      this.instanceId = this.$route.query.instanceId;
      this.nodeId = this.$route.query.nodeId;
      this.carbonId =  this.$route.query.carbonId;
      var thisVue = this;
      bpmService.init({instanceId:this.instanceId,formType:"mobile",readonly:true,nodeId:this.nodeId,carbonId :this.carbonId},function(data){
        formService.initCustFormFu(data.form.formHtml,data);
        thisVue.form = data.form;
        data.buttonList.forEach((item)=>{
          if (item.name=="审批历史"||item.name=="流程图"){
            thisVue.buttons.push(item);
          }
        });
        thisVue.instance = data.instance;
        thisVue.flowRequestParam = data.flowRequestParam;
        thisVue.configSpecified = data.configSpecified;
      });

    }

  },
  watch:{
    '$route.query.instanceId'(newVal,oldVal){
      if(newVal && newVal != oldVal){
        this.buttons=[];
        this.getData();
      }
    }
  },
  created(){
      this.getData();
  },

}
</script>

<style scoped>

</style>
